<template>
    <div>
  
      <!-- 弹出框1 -->
      <vol-box :lazy="true"
               :model.sync="model.box1" 
               title="柜子状态监控"
               :height="700"
               :width="700"
               :padding="15">
               <div class="containerBox">
            <div
            @click="start(item)"
            v-for="item in list"
            :key="item.boxId"
            :class="{ active: activeIndex === item.boxId }"
            >
            <span>{{ item.boxName  }}
                <i v-if="item.green==1" style="background-color: springgreen;width:20px;  height:20px;  border-radius: 50%;  display: block;margin-left: 100px;margin-top:-35px"></i>
                <i v-if="item.red==1"  style="background-color: red ;width:20px;  height:20px;  border-radius: 50%;  display: block;margin-left: 100px;margin-top:-35px"></i>
            </span>
            <span v-if="item.red==1" style="font-size:12px">
                订单号:{{item.orderId}}<br/>
                游客姓名:{{item.name}}<br/>
                游客电话:{{item.phone}}<br/>
                租赁时间:{{item.occupancyTime}}<br/>
                开始时间:{{item.startTime}}<br/>
                结束时间:{{item.endTime}}<br/>
            </span>
            </div>
        </div>
      </vol-box>
    </div>
  </template>
  <script>
  import VolBox from "@/components/basic/VolBox.vue";
  export default {
    components: { "vol-box": VolBox },
    methods: {
    },
    data () {
      return {
        model: {
          box1Text: "",
          box1: false,
          box1Text: "",
          box2: false,
          box3: false,
          box3Row: {},
        },
        activeIndex: 1,
        list: [
        ],
        cicles: 0, //定义圈数
        time: 400, //定义速度
      }
    },
    methods: {
      getParent () {
        this.$emit("parentCall", $vue => {
          this.model.box1Text = JSON.stringify($vue.buttons);
        })
      },
      getTestData () {
        return "这里是获取到的子组件对象" + JSON.stringify(this.model);
      },
      //弹出框1
     async open1 (row) {
        // console.log("row",row);
        await this.http.get("/api/Cabinet/GetCabinetBoxOrder?cabinetid="+row.id,"",false).then(x=>{
            // console.log(x.data);
            this.list=x.data;
        })

        this.model.box1 = true;
      },
      start(item) {
        this.activeIndex=item.boxId;
        },
    }
  };
  </script>
  
<style scoped>
 .containerBox {
  width: 660px;
  height: 660px;
  background-color: aliceblue;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.containerBox div {
  width: 200px;
  height: 200px;
  background-color: rgb(57, 110, 110);
  margin: 10px;
}
.containerBox div span {
  font-size: 30px;
  color: white;
}
.active {
  background-color: orange !important;
}
.dotClass {
      width:10px;
      height:10px;
      border-radius: 50%;
      display: block;
      margin-left: 10px;  }
</style>